<template>
    <div class="page">
        <div class="up">
            <div class="txt">
                <p class="message">语料基本信息：</p>
                <span>原始语料ID:
                    {{sentencepush.materialId}}
                </span>
                <span class="Brandname"> 品牌名称：
                    {{sentencepush.brandName}}--{{sentencepush.brandId}}
                </span>
            </div>

            <div class="material">
                <el-input id="el-textarea" type="textarea" autosize placeholder="请输入内容" v-model="sentencepush.content">
                </el-input>
            </div>
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- materialId -->
        <!-- 品类 -->
        <div class="block">
            <span class="cat">品类:</span>
            <el-dropdown>
                <!-- 品类平铺 -->
                <span class="el-dropdown-link">
                    美妆个护<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <!-- 二级三级品类平铺-->
                <el-dropdown-menu slot="dropdown" class="el-dropdown-menu">              
                    <div class="activity-finally"  v-for="(item,index) in two" :key="index">
                        <p class="text">{{item.name}}</p>
                          <ul  class="activity-finally">
                            <li class="lifinally" v-for="(item1,id) in item.children" :key="item1.id" @click="select(item1.id,$event)">
                                {{item1.name}}
                            </li>
                        </ul>                                                
                    </div>
                </el-dropdown-menu>
            </el-dropdown>

            <!-- 选中三级品类，放入catcontent框中 -->
            <span class="catcontent">{{catarr}}</span>
        </div>
        <div class="handle">
            <!-- 中间显示隐藏区-->
            <div class="display" v-for="(item,index) in arr" :key=index>
                <!-- 左 -->
                <div class="centerbox">
                    <!-- 上- -->
                    <div class="inp">
                        <span class="SentenceID">语料句子ID：</span>
                        <div class="tagsort">
                            <span style="color: red">*标签分类：</span>
                            <el-cascader v-model="item.value" :options="options"
                                @change="(value)=>{handleChange(value,item)}" placeholder="请选择品类">
                            </el-cascader>
                        </div>
                        <input type="text" v-show="item.inputblock" class="buchong" v-model="item.qitacontent">
                    </div>
                    <!-- 上二 -->
                    <div class="centercontent">
                        <el-form label-width="100px">
                            <div class="demo">
                                <span class="title" style="color: red">*语料句子：</span>
                                <el-input v-model="item.sentence" placeholder="预料句子内容"></el-input>
                            </div>
                            <el-checkbox class="checked" v-model="item.checked">该句子可能含有变量</el-checkbox>
                            <el-form-item class="inpu" label="功能短语：" prop="function">
                                <el-input v-model="item.function" placeholder="预料句子内容"></el-input>
                            </el-form-item>
                            <el-form-item class="inpu" label="利益短语：" prop="benefit">
                                <el-input v-model="item.benefit" placeholder="不同利益短语用‘;’区隔,例如：利益1;利益2;利益3;">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <button type="text" class="del" @click="del(index)">删除</button>
            </div>

            <!-- 按钮 -->
            <div class="btn">
                <el-button class="add" type="warning" round @click="add">增加一条句子标注</el-button>
                <el-button class="store" type="primary" round @click="check">保存 & 查看列表</el-button>
                <el-button class="next" type="primary" round @click="next">下一条</el-button>
            </div>

        </div>
    </div>
</template>

<script>
    import { materialcontentpush, Catdata, tagthree, addsentence } from "../../api/http.js"
    import axios from "axios"
    export default {
        name: "Page",
        data() {
            return {
                textarea1: "",
                catarr: "",//三级品类数组
                qitacontent: '',//其他框内容
                arr: [],//分析框数组
                checked: false,//复选框
                value: [],//下拉框三级标签联动值
                options: [],//标签框三级联动
                sentencepush: {},// 语料推送，不确定返回类型用null
                catvalue: null,//品类框数据
                two: null,//二级
                tagthreelist: null,//标签三级
                tagid: ""
            };
        },
        //深度监听--分析框的变化 
        watch: {
            arr: {
                handler(val) {
                    console.log(val)
                },
                deep: true
            }
        },

        mounted() {
            this.pagedata()//定义预料推送方法
            this.catdatapull()//定义品类下拉数据方法
            this.tagthreedata()//标签三级联动方法
        },
        methods: {
            // 语料推送
            async pagedata() {
                const res = await materialcontentpush()
                // console.log(res)
                this.sentencepush = res.data
            },

            //品类框
            catdatapull() {
                this.$api.Catdata({
                }).then(res => {
                    // console.log(res)
                    this.catvalue = res.data.data
                    // 二级三级数据
                    res.data.data.forEach((item, index) => {
                        this.two = item.children
                        // console.log(this.two)
                    })
                })
            },

            //标签三级框
            async tagthreedata() {
                const res = await tagthree()
                console.log(res.data)
                this.options = res.data.map((item) => {
                    return {
                        value: item.name,
                        label: item.name,
                        children: item.children.map((item2) => {
                            return {
                                value: item2.name,
                                label: item2.name,
                                children: item2.children.map((item3) => {
                                    return {
                                        value: item3.name,
                                        label: item3.name,
                                        tagid: item3.id
                                    }

                                })

                            }
                        })
                    }
                })
            },

            //标签选择其他时，input框出现--
            handleChange(value, item) {
                console.log(value)
                console.log(item)
                 
                //取标签三级id
                let list = this.options.forEach((item) => {
                    item.children.forEach((item2) => {
                        item2.children.forEach((item3) => {
                            if( item3.value == value[2]){
                               this.tagid=item3
                            }
                        })
                    })
                    
                })
                
                if (value[1] && value[2] == "其他") {
                    item.inputblock = true;
                } else {
                    item.inputblock = false;
                }
            },

            //点击增加，标注框 出现 
            async add() {
                var obj = {
                    function: "",
                    benefit: "",
                    checked: false,
                    inputblock: false,
                    value: [],
                    comments: "",//其他
                    sentence: "",//预料句子内容
                }
                this.arr.push(obj);// 再次点击，增加一个标注框  

                // 点击单个句子保存
                //如果是第一次点，跳过，不调用
                if (this.arr.length > 1) {
                    var obj1 = {
                        materialId: this.sentencepush.materialId,
                        sentenceId: this.sentencepush.sentenceId,
                        brandId: this.sentencepush.brandId,
                        userId: JSON.parse(localStorage.getItem("userinfo")).data.userId,//用户id
                        sentence: this.arr[this.arr.length - 2].sentence,//分析框的内容
                        benefit: this.arr[this.arr.length - 2].benefit,
                        function: this.arr[this.arr.length - 2].function,
                        varYN: this.arr[this.arr.length - 2].checked,
                        comments: this.arr[this.arr.length - 2].qitacontent,//其他
                        tag1: this.arr[this.arr.length - 2].value[0],//三级标签框
                        tag2: this.arr[this.arr.length - 2].value[1],
                        tag3: this.arr[this.arr.length - 2].value[2],
                        categoryId: this.categoryid, //品类框3级的id
                        tagId:this.tagid.tagid,//标签框第三级id

                        // isList:0/1,//是否是最后一个
                        // if(this.arr[this.arr.length - 1]){
                        //     isList=true
                        // }
                    }
                    axios.post('/api/saveSentence', obj1)
                        .then(function (res) {
                            console(res)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

            },
            //点击删除，删除当条数据
            del(index) {
                this.$confirm('你确定删除？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '删除',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        this.arr.splice(index, 1); 
                        this.$message({
                            type: 'info',
                            message: '删了删了！'
                        });
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '放弃删除'
                                : '删除'
                        })
                    });
                var obj2 = {
                    materialId: this.sentencepush.materialId,
                    sentenceId: this.sentencepush.sentenceId,
                    brandId: this.sentencepush.brandId,
                    userId: JSON.parse(localStorage.getItem("userinfo")).data.userId,//用户id
                    sentence: this.arr[this.arr.length - 1].sentence,//分析框的内容
                    benefit: this.arr[this.arr.length - 1].benefit,
                    function: this.arr[this.arr.length - 1].function,
                    varYN: this.arr[this.arr.length - 1].checked,
                    comments: this.arr[this.arr.length - 1].qitacontent,//其他
                    tag1: this.arr[this.arr.length - 1].value[0],//三级标签框
                    tag2: this.arr[this.arr.length - 1].value[1],
                    tag3: this.arr[this.arr.length - 1].value[2],
                    categoryId: this.categoryid, //品类框3级的id
                    tagId:this.tagid.tagid,//标签框第三级id
                }
                axios.post('/api/deleteSentence', { obj2 })
                .then(function (res) {
                        console.log(res)
                    })
            },
            check() {
                //查看保存当下标注框的内容--数到finish list中
                this.add()
                this.$router.push("/finish")
            },
            next() {
                this.pagedata()//推预料
                var obj1 = {
                    materialId: this.sentencepush.materialId,
                    sentenceId: this.sentencepush.sentenceId,
                    brandId: this.sentencepush.brandId,
                    userId: JSON.parse(localStorage.getItem("userinfo")).data.userId,//用户id
                    sentence: this.arr[this.arr.length - 1].sentence,//分析框的内容
                    benefit: this.arr[this.arr.length - 1].benefit,
                    function: this.arr[this.arr.length - 1].function,
                    varYN: this.arr[this.arr.length - 1].checked,
                    comments: this.arr[this.arr.length - 1].qitacontent,//其他
                    tag1: this.arr[this.arr.length - 1].value[0],//三级标签框
                    tag2: this.arr[this.arr.length - 1].value[1],
                    tag3: this.arr[this.arr.length - 1].value[2],
                    categoryId: this.categoryid, //品类框3级的id
                    tagId:this.tagid.tagid,//标签框第三级id

                    // isList:0/1,//是否是最后一个
                    // if(this.arr[this.arr.length - 1]){
                    //     isList=true
                    // }
                }
                axios.post('/api/saveSentence', obj1)
                    .then(function (response) {
                        console.log(111);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                this.arr = []
            },
            // 三级品类框
            select(index) {
                this.categoryid = index//点击的id
                this.catarr = event.currentTarget.innerText;//获取点击的对象 
            },

        }
    };
</script>
<style scoped>
    .page {
        width: 1200px;
        margin: auto;
    }

    .material {
        width: 980px;
        height: 229px;
        border: 1px solid rgba(153, 153, 153, 1);
        margin: 20px 591px 0px 50px;
        text-align: center;
        color: rgba(80, 80, 80, 1);
        overflow: hidden;
    }

    .materialcontent {
        margin-top: 40px;
        font-size: 14px;

    }

    .txt {
        width: 400px;
        height: 42px;
        margin: 20px 591px 15px 50px;
    }

    .Brandname {
        margin-left: 60px;
    }

    span,
    .message {
        font-size: 14px;
        color: rgba(80, 80, 80, 1);
    }

    .block {
        margin: 20px 591px 15px 50px;
        width: 300px;
        height: 36px;
        line-height: 36px;
    }

    .display {
        width: 980px;
        height: 250px;
        margin-bottom: 10px;
        border: 1px solid rgba(35, 115, 214, 1);
        display: flex;
    }

    .btn {
        width: 980px;
        height: 110px;
        margin-top: 30px;
    }

    .add {
        width: 980px;
        height: 48px;
    }

    .store,
    .next {
        width: 465px;
        height: 48px;
        margin: 10px 40px 0px 0px;
        background: rgba(35, 115, 214, 1);
    }

    .store {
        margin: 10px 40px 0px 0px;
    }

    .next {
        margin: 10px 2px 0px 0px;
    }

    /*fen'xi框 */
    .del {
        float: right;
        width: 88px;
        height: 250px;
        color: white;
        line-height: 229px;
        text-align: center;
        background: rgba(35, 115, 214, 1);
        border: none;
    }

    .inp {
        width: 894px;
        height: 50px;
        display: flex;
    }

    .centerbox {
        width: 894px;
        height: 50px;
    }

    .SentenceID {
        display: inline-block;
        width: 170px;
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
    }

    .tagsort {
        width: 430px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
    }

    .centercontent {
        width: 894px;
        height: 200px;
    }

    .checked {
        height: 30px;
        line-height: 30px;
        margin-left: 100px;
    }

    /* 设置拖动条 */
    .handle {
        margin: 0px 179px 0px 40px;
        overflow-y: scroll;
        width: 1010px;
        height: 400px;
        float: left;
        border: 1px solid #d4d4d4;
    }

    /* 品类框 */
    .catcontent {
        display: inline;
        margin-left: 60px;
        text-align: center;
    }

    /* 其他其他--自主补充 */
    .buchong {
        width: 360px;
        height: 40px;
        margin: 3px;
    }

    /* 品类 */
    .el-dropdown-menu {
        width: 421px;
        overflow-y: scroll;
        height: 400px;
        margin-left: 195px;
        padding: 0px;
    }

    .text {
        margin: 10px;
    }

    .activity-finally,
    .activity-sort,
    .time {
        width: 400px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .lifinally,
    .lisort,
    .lidate {
        width: 14%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 15px;
        margin: 5px 3px;
        color: rgb(194, 190, 190);
        font-size: 12px;
        border: 1px solid #d4d4d4;
    }

    /* 预料句子变红 */
    .demo {
        display: flex;
        width: 860px;
        margin: 10px;
    }

    .write {
        width: 760px;
    }

    .title {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    /* 标签分类框边长 */
    #yy {
        width: 260px;
    }
</style>